<template>
  <div class="cs-drawer">
    <template v-if="isShowFoldBtn">
      <div class="fold_btn_fold" v-show="drawerBoxFold" @click="drawerFoldBtnClick">
        <i class="el-icon-arrow-left"></i>
      </div>
    </template>

    <div class="drawerBox" :class="{ drawerBox_Fold: drawerBoxFold == true }">
      <section>
        <slot></slot>
        <div class="fold_btn" @click="drawerFoldBtnClick">
          <i class="el-icon-arrow-right"></i>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShowFoldBtn: {
      type: Boolean,
      default: true
    },
    drawerFold: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      drawerBoxFold: this.drawerFold
    }
  },
  created() {
    this.$nextTick(() => {
      this.$bus.$on('showDrawer', () => {
        this.drawerBoxFold = false
      })
    })
  },
  methods: {
    drawerFoldBtnClick() {
      this.drawerBoxFold = !this.drawerBoxFold
      console.log(this.dataSource)
      if (this.dataSource === 'earlyWarning') {
        this.$bus.$emit('drawerBoxStatusChange_earlyWarning', this.drawerBoxFold)
      } else if (this.dataSource === 'dataSearch') {
        this.$bus.$emit('drawerBoxStatusChange_dataSearch', this.drawerBoxFold)
      }
    }
  }
}
</script>

<style scoped>
/* 侧边栏折叠样式 */
.cs-drawer {
  position: fixed;
  right: 0;
}

/* 侧边栏样式 */
/* 正常样式 */
.drawerBox {
  /* position: fixed; */
  position: absolute;
  top: 0px;
  /* top: 268px; */
  /* top: 230px; */
  /* right: 0px; */
  right: -26px;
  /* width: 384px; */
  width: 330px;
  height: 676px;
  /* height: 660px; */
  transition: right 0.3s ease;
  z-index: 10;
}

.drawerBox_Fold {
  /* right: -399px; */
  /* right: -345px; */
  right: -400px;
}

section {
  position: relative;
  /* width: 384px; */
  width: 330px;
  height: 676px;
  /* height: 660px; */
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px #bfbfbf, 0px 2px 4px 0px #bfbfbf;
  margin-bottom: 26px;
}

.fold_btn {
  position: absolute;
  top: calc(50% - 65px);
  left: -15px;
  width: 15px;
  height: 130px;
  background-color: #fff;
  box-shadow: -3px 2px 4px -3px #bfbfbf;
  cursor: pointer;
}

.fold_btn i {
  font-size: 20px;
  margin-top: 55px;
  color: #dddddd;
}

.fold_btn_fold {
  position: fixed;
  top: 50%;
  right: 0;
  width: 30px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  background-color: #006eff;
  box-shadow: 0px 2px 4px 0px #bfbfbf;
  z-index: 9;
}

.fold_btn_fold i {
  font-size: 20px;
  color: #fff;
}

/* .el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
} */
</style>
